<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-col 
        :span="24"     
        >
          <el-input
            placeholder="请输入姓名"
            v-model="listQuery.name"
            style="width: 150px"
            class="filter-item"
            clearable
            @keyup.enter.native="handleFilter"
          />
          <el-select
            v-model="listQuery.department"
            placeholder="请选择部门"
            clearable
            style="width: 150px"
            class="filter-item"
            @change="updateGroup"
          >
            <el-option
              v-for="item in departmentAry"
              :key="'state' + item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>
          <el-select
            v-model="listQuery.group"
            placeholder="请选择小组"
            clearable
            style="width: 150px"
            class="filter-item"
          >
            <el-option
              v-for="item in groupAry"
              :key="'state' + item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>       
          <el-select
            v-model="listQuery.jurisdiction"
            placeholder="请选择职务"
            clearable
            style="width: 150px"
            class="filter-item"
          >
            <el-option
              v-for="item in jobArray"
              :key="'jobArray' + item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>
          <el-select
            v-model="listQuery.pid"
            placeholder="请选择上司"
            clearable
            style="width: 150px"
            class="filter-item"
          >
            <el-option
              v-for="item in bossAry"
              :key="'bossAry' + item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="options-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="addCtlShow()"
        >添加</el-button
      >
    </div>
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :key="tableKey"
        :data="list"
        border
        fit
        @sort-change="sortHanlde"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="id"
          sortable="custom"
          align="left"
          width="80"
        >
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
          sortable="custom"
          width="120px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="部门"
          prop="department"
          sortable="custom"
          width="120px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="小组"
          prop="group"
          sortable="custom"
          width="120px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="职务"
          prop="jurisdiction"
          width="120px"
          align="left"
        >
        </el-table-column>
        <el-table-column label="上司" prop="pid" width="120px" align="left">
          <template slot-scope="scope">
            <span>{{ bossObj[scope.row.pid] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="设备"
          prop="equipment"
          sortable="custom"
          width="150px"
          align="left"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.equipment.join(",") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="绑定账号"
          prop="bind_account"
          width="150px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_time"
          sortable="custom"
          width="150px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          width="300"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              style="width: auto"
              v-if="
                scope.row.jurisdiction != '组员' && scope.row.bind_account == ''
              "
              @click="bindAccount(scope.row)"
              >绑定账号</el-button
            >
            <el-button
              type="primary"
              size="mini"
              style="width: auto"
              v-if="
                scope.row.jurisdiction != '组员' && scope.row.bind_account != ''
              "
              @click="bindAccount(scope.row)"
              >解绑账号</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="updateTeamMem(scope.row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="removeTeamMem(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="pageHandle"
      />
    </div>
    <div class="dialog-container">
      <!-- 角色编辑弹框 -->
      <team-members-edit
        :show.sync="team_membersEdit.show"
        :data="team_membersEdit.data"
        @success="getList"
      >
      </team-members-edit>

      <team-members-add :show.sync="team_membersAdd.show" @success="getList">
      </team-members-add>
      <team-members-bind
        :show.sync="team_membersBind.show"
        :data="team_membersBind.data"
        @success="getList"
      >
      </team-members-bind>
    </div>
  </div>
</template>

<script>
import {
  getlist,
  remove_by_id,
  getBoss,
  getDepartment,
  jobArray,
} from "@/api/org_team_members";
import g from "@/utils/utilFn";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import team_membersAddctl from "./components/team_membersAdd";
import team_membersEditctl from "./components/team_membersEdit";
import team_membersBindctl from "./components/team_membersBind";

export default {
  name: "rolesManage",
  components: {
    Pagination,
    "team-members-add": team_membersAddctl,
    "team-members-edit": team_membersEditctl,
    "team-members-bind": team_membersBindctl,
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      departmentAry: [],
      groupAry: [],
      jobArray: [],
      bossAry: [],
      bossObj: {},
      department_groupAry: [],
      listLoading: true,
      listQuery: {
        name: "",
        department: "",
        group: "",
        jurisdiction: "",
        pid: "",
        page: 1,
        limit: 10,
        filed: "id",
        sort: "ascending",
      },
      team_membersEdit: {
        show: false,
        data: undefined,
      },
      team_membersAdd: {
        show: false,
        data: undefined,
      },
      team_membersBind: {
        show: false,
        data: undefined,
      },
    };
  },
  created() {
    this.initJob();
    this.initCtl();
  },
  methods: {
    initCtl() {
      this.initBoss().then(this.initDepartmentGroup).then(this.getList);
    },
    initJob() {
      this.jobArray = jobArray;
    },
    initDepartmentGroup() {
      return getDepartment().then((response) => {
        console.log(response);
        var data = g.Copy(response.data);
        this.department_groupAry = g.Copy(data);
        var departmentAry = g.removeRepeatAttr(data, "department");
        g.each(departmentAry, function (it) {
          it.key = it.department;
          it.name = it.department;
        });
        this.departmentAry = departmentAry;
        var data = g.Copy(response.data);
        var groupAry = g.removeRepeatAttr(data, "group");
        g.each(groupAry, function (it) {
          it.key = it.group;
          it.name = it.group;
        });
        this.groupAry = groupAry;
      });
    },
    updateGroup(v) {
      // alert(v)
      var data = g.Copy(this.department_groupAry);
      v = v || "";
      var groupAry = g.removeRepeatAttr(data, "group");
      if (v) {
        var res = g.query(data, function (it) {
          if (it.department == v) {
            return true;
          } //效率最好
        });
        groupAry = g.removeRepeatAttr(res, "group");
      }
      g.each(groupAry, function (it) {
        it.key = it.group;
        it.name = it.group;
      });
      this.groupAry = groupAry;
      this.listQuery.group = "";
    },
    initBoss() {
      return getBoss().then((response) => {
        console.log(response);
        this.bossAry = response.data;
        this.bossObj = g.toObject(response.data, "id", "name");
        this.bossObj["0"] = "无";
      });
    },
    getList() {
      this.listLoading = true;
      getlist(this.listQuery).then((response) => {
        this.list = response.data;
        this.total = response.count || 0;
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    handleFilter() {
      this.getList();
    },
    sortHanlde(column) {
      console.log(column);
      this.listQuery.filed = column.prop;
      this.listQuery.sort = column.order;
      this.getList();
    },
    pageHandle(page) {
      this.listQuery.page = page.page;
      this.listQuery.limit = page.limit;
      this.getList();
    },
    removeTeamMem(row) {
      this.$confirm(
        `此操作将永久删除【${row.name}】组员信息, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          remove_by_id(row.id).then((response) => {
            if (response.data > 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateTeamMem(row) {
      this.team_membersEdit.show = true;
      this.team_membersEdit.data = row;
    },

    addCtlShow() {
      this.team_membersAdd.show = true;
    },
    bindAccount(row) {
      this.team_membersBind.show = true;
      this.team_membersBind.data = row;
    },
  },
};
</script>
